let arr = [{
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400506629423.jpg",
    name: "a**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400540139692.jpg",
    name: "T**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400540118251.jpg",
    name: "慧**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400540069242.jpg",
    name: "b**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400681111127.jpg",
    name: "宏**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400865596453.jpg",
    name: "宋**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400902911909.jpg",
    name: "寻**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400953029599.jpg",
    name: "雪**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400989455804.jpg",
    name: "慧**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401005976517.jpg",
    name: "杨**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400968714979.jpg",
    name: "宏**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401035049758.jpg",
    name: "红**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401049432628.jpg",
    name: "张**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401077574176.jpg",
    name: "彩**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401130741871.jpg",
    name: "张**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401189588504.jpg",
    name: "一**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401847533545.jpg",
    name: "周**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401796465344.jpg",
    name: "朱**",
    content: "已通过咨询成功下单"
}]

function addCssToDeng() {
    document.getElementsByClassName('message-tip-list')[0].classList.add('active');
    document.getElementsByClassName('message-tip-list')[document.getElementsByClassName('message-tip-list').length -
            1]
        .classList.add('active-before');

        console.log(document.getElementsByClassName('message-tip-list')[document.getElementsByClassName('message-tip-list').length -
            1]);
    document.getElementsByClassName('message-tip-list')[document.getElementsByClassName('message-tip-list').length -
            2]
        .classList.add('active-out');
        console.log(document.getElementsByClassName('message-tip-list')[document.getElementsByClassName('message-tip-list').length -
        2]);
}
function loop() {
        var active = document.getElementsByClassName('active');
        var active_before = document.getElementsByClassName('active-before');
        var active_out = document.getElementsByClassName('active-out');
        var tip_list = document.getElementsByClassName('message-tip-list');
        var out_next = active_out[0].nextElementSibling;
        var before_next = active_before[0].nextElementSibling;
        var active_next = active[0].nextElementSibling;
        if (before_next == null) {
            before_next = tip_list[0];
            console.log("倒数第一个为空");

        } else if (out_next == null) {
            console.log("倒数第二个为空");
            out_next = tip_list[0];
        } else if (active_next == null) {
            console.log("第一个为空");
            active_next = tip_list[0];
        }
        active_out[0].classList.remove("active-out");
        out_next.classList.add("active-out");
        active_before[0].classList.remove("active-before")
        before_next.classList.add("active-before");
        active[0].classList.remove("active");
        active_next.classList.add("active");

}
var boarddiv='';
for (var i = 0; i < arr.length; i++) {
    boarddiv +=
        `<div  class="message-tip-list">
                <span  class="message-tip-pic">
                    <img  src="${arr[i].picture}" alt="">
                </span>
                <span  class="message-tip-text">${arr[i].name} ${arr[i].content}</span>
            </div>`
}

$(".message").append(boarddiv);
addCssToDeng();
setInterval(loop, 3000);